<template>
  <div>
    <div class="box">
      <div class="top">
        <input
          type="text"
          v-model="title"
          class="form-control"
          style="width: 200px"
          placeholder="标题"
        />
        <input
          type="text"
          v-model="name"
          class="form-control"
          style="width: 200px"
          placeholder="发布人"
        />
        <button @click="xz" class="btn btn-sm btn-info">新增</button>
      </div>

      <table class="table table-bordered">
        <tr>
          <th>序号</th>
          <th>标题</th>
          <th>发布人</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in newsList" :key="index">
          <td>{{ index }}</td>
          <td>{{ item.title }}</td>
          <td>{{ item.user }}</td>
          <td>
            <button @click="del(index)" class="btn btn-sm btn-danger">删除</button>
            <button @click="bj(index)" class="btn btn-sm btn-info">编辑</button>
          </td>
        </tr>
      </table>
    </div>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="xglist">
        <el-input v-model="xglist.title" autocomplete="off"></el-input>
        <el-input v-model="xglist.user" autocomplete="off"></el-input>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="qd(index)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/bootstrap.css";
export default {
  name: "",
  data() {
    return {
      title: "",
      name: "",
      index: "",
      dialogFormVisible: false,
      newsList: [
        {
          title: "在移动设备开发",
          user: "张若昀",
          id: "45211546",
        },
        {
          title: "图形及特效特性",
          user: "张若昀",
          id: "61341341",
        },
        {
          title: "设备兼容特性",
          user: "张若昀",
          id: "62451431",
        },
        {
          title: "W3C将致力于开发用于实时通信",
          user: "张若昀",
          id: "62345213",
        },
        {
          title: "全新的表单输入对象",
          user: "张若昀",
          id: "23322445",
        },
      ],
      xglist: {
        title: "",
        user: "",
        id: "",
      },
    };
  },
  mounted() {},
  methods: {
    del(index) {
      this.newsList.splice(index, 1);
    },
    bj(index) {
      this.index = index;
      this.dialogFormVisible = true;
      // let list = JSON.parse(JSON.stringify(this.xglist))
      this.xglist = this.newsList[index];
    },
    qd() {
      this.dialogFormVisible = false;
      let obj = JSON.parse(JSON.stringify(this.xglist));
      this.newsList[this.index] = obj;
    },
    xz() {
      let obj = {
        title: this.title,
        user: this.name,
      };
      this.newsList.push(obj);
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.box {
  width: 600px;
  margin: 20px auto;
  border: 1px solid #ccc;
  .top {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
}
</style>